<template>
  <div>
    <div ref="chartColumn" style="width:580px; height:410px;margin-top: 20px"></div>
    <!--    <button @click="changeOption">点击改变内容</button>-->
  </div>
</template>

<script>
import { getTisTics } from "@/api/industry/shulian";
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chartColumn: null,
      option: {
        // title: {
        //   text: 'Stacked Area Chart'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['园区', '物理空间']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '园区',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '物理空间',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          },
        ]
      }
    }
  },
  methods: {
    //统计产业物理空间信息
    getTics(){
      getTisTics().then(res =>{
        // console.log(res,'园区，物理空间')
        const newData1 = Object.values(res.data.monthly);
        const newData2 = Object.values(res.data.park.monthly);
        this.option.series[0].data = newData2;
        this.option.series[1].data = newData1;
        // console.log( this.option,'五菱凯捷')
        this.chartColumn.setOption(this.option);
      })
    },
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn)
      // this.chartColumn.setOption(this.option)
      this.getTics();
    }
  },
  mounted: function() {
    this.initChart()
    // this.getTics()
  }
}
</script>

<style scoped>

</style>
